<template>
  <div>
    <el-card class="box-card" v-show="isCard">
      <div slot="header" class="clearfix">
        <span>采集点详情</span>
        <!-- <el-button style="float: right" type="text" @click="closeCard">
          <i class="el-icon-close"></i>
        </el-button> -->
        <div style="margin-right: 10px">
          <div style="
              float: right;
              width: 30px;
              height: 30px;
              background-size: cover;
              background-position: center;
            " class="btn" @click="closeCard">
          </div>
        </div>
      </div>
      <div class="text">
        <div class="left item">
          <h3>基本信息</h3>
          <p>序号: {{ sequenceNumber }}</p>
          <p>编号: {{ code }}</p>
          <p>采样点代码: {{ sampleCode }}</p>
          <p>采样点名称: {{ sampleName }}</p>
          <p>采样点位置: {{ sampleLocation }}</p>
          <p>采样时间: {{ sampleDate }}</p>
          <p>采样人员: {{ samplePerson }}</p>
          <p>数据负责人: {{ dataResponsible }}</p>
          <p>树种: {{ treeSpecies }}</p>
          <p>经纬度: {{ latitude }}, {{ longitude }}</p>
          <p>平均海拔高度: {{ averageElevation }}</p>
        </div>
        <div class="right">
          <img src="../../assets/images/header/u73.jpg" alt="采集点图片" />
        </div>
      </div>

      <div class="card-footer">
        <el-button @click="showYearTable" type="primary" icon="el-icon-s-data">年表</el-button>
        <el-button @click="showRawData" type="primary" icon="el-icon-s-order">原始测量数据</el-button>
        <el-button @click="showCrossData" type="primary" icon="el-icon-s-promotion">交叉定年数据</el-button>
      </div>
    </el-card>
    <!-- <el-dialog title="树轮宽度年表-IDM0001-GNS-RW" :visible.sync="dialogYearTableVisible" :modal="false" width="75%">
      <div>
        <el-input placeholder="请输入数据" v-model="input" clearable style="width: 300px;">
        </el-input>
        <el-button @click="showYearTable" type="primary" icon="el-icon-search">查询</el-button>
        <el-button @click="showRawData" type="primary" icon="el-icon-download">下载</el-button>
        <el-button @click="showCrossData" type="primary" icon="el-icon-printer">打印</el-button>
      </div>
      <div>
        <div class="left-table"  style="width: 45%;">
          <el-table :data="tableData"  height="500px" >
            <el-table-column label="年份" prop="sampleId"></el-table-column>
            <el-table-column label="STD" prop="year"></el-table-column>
            <el-table-column label="RES" prop="data1"></el-table-column>
            <el-table-column label="ARS" prop="data2"></el-table-column>
            <el-table-column label="样本编号" prop="data3"></el-table-column>
          </el-table>
        </div>
        <div class="right-chart">

        </div>
      </div>

    </el-dialog> -->
    <el-dialog title="树轮宽度原始测量数据-IDM0001-GNS-RW" :visible.sync="dialogRawDataVisible" :modal="false" width="55vw">
      <el-input placeholder="请输入数据" v-model="input" clearable style="width: 300px;">
      </el-input>
      <el-button @click="showYearTable" type="primary" icon="el-icon-search">查询</el-button>
      <el-button @click="showRawData" type="primary" icon="el-icon-download">下载</el-button>
      <el-button @click="showCrossData" type="primary" icon="el-icon-printer">打印</el-button>
      <el-table :data="tableData" :show-header="false" height="500px" >
        <el-table-column label="样本编号" prop="sampleId"></el-table-column>
        <el-table-column label="年份" prop="year"></el-table-column>
        <el-table-column label="数据1" prop="data1"></el-table-column>
        <el-table-column label="数据2" prop="data2"></el-table-column>
        <el-table-column label="数据3" prop="data3"></el-table-column>
        <el-table-column label="数据4" prop="data4"></el-table-column>
        <el-table-column label="数据5" prop="data5"></el-table-column>
        <el-table-column label="数据6" prop="data6"></el-table-column>
        <el-table-column label="数据7" prop="data7"></el-table-column>
        <el-table-column label="数据8" prop="data8"></el-table-column>
        <el-table-column label="数据9" prop="data9"></el-table-column>
        <el-table-column label="数据10" prop="data10"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="树轮宽度交叉定年数据-IDM0001-GNS-RW" :visible.sync="dialogCrossDataVisible" :modal="false" width="55%">
      <el-input placeholder="请输入数据" v-model="input" clearable style="width: 300px;">
      </el-input>
      <el-button @click="showYearTable" type="primary" icon="el-icon-search">查询</el-button>
      <el-button @click="showRawData" type="primary" icon="el-icon-download">下载</el-button>
      <el-button @click="showCrossData" type="primary" icon="el-icon-printer">打印</el-button>
      <el-table :data="tableData" :show-header="false" style="width: 300px;">
        <el-table-column label="样本编号" prop="sampleId"></el-table-column>
        <el-table-column label="年份" prop="year"></el-table-column>
        <el-table-column label="数据1" prop="data1"></el-table-column>
        <el-table-column label="数据2" prop="data2"></el-table-column>
        <el-table-column label="数据3" prop="data3"></el-table-column>
        <el-table-column label="数据4" prop="data4"></el-table-column>
        <el-table-column label="数据5" prop="data5"></el-table-column>
        <el-table-column label="数据6" prop="data6"></el-table-column>
        <el-table-column label="数据7" prop="data7"></el-table-column>
        <el-table-column label="数据8" prop="data8"></el-table-column>
        <el-table-column label="数据9" prop="data9"></el-table-column>
        <el-table-column label="数据10" prop="data10"></el-table-column>
      </el-table>
    </el-dialog>
    <!-- <timeline ref="timeline" /> -->
  </div>
</template>

<script>
import timeline from "./timeline.vue";
export default {
  name: "popInfo",
  components: {
    timeline,
  },
  data() {
    return {
      sequenceNumber: "IDM0001",
      code: "IDM0001-GNS",
      sampleCode: "GNS",
      sampleName: "巩乃斯林场林中",
      sampleLocation: "中国新疆伊犁河流域巩乃斯林场",
      sampleDate: "2005年5月29日",
      samplePerson: "袁玉江、张同文",
      dataResponsible: "尚华明",
      treeSpecies: "雪岭云杉 (Picea schrenkiana )",
      latitude: "84°38′16.3″",
      longitude: "43°14′35.8″",
      averageElevation: "2242",
      isCard: false,
      dialogYearTableVisible: false,
      dialogRawDataVisible: false,
      dialogCrossDataVisible: false,
      tableData: [
        { sampleId: 'GNS011', year: 1870, data1: 2531, data2: 1590, data3: 2383, data4: 2141, data5: 1753, data6: 2017, data7: 2107, data8: 2303, data9: 2917, data10: 1435 },
        { sampleId: 'GNS011', year: 1880, data1: 1503, data2: 1713, data3: 2619, data4: 2855, data5: 2524, data6: 2825, data7: 2708, data8: 2254, data9: 2662, data10: 2787 },
        { sampleId: 'GNS011', year: 1870, data1: 2531, data2: 1590, data3: 2383, data4: 2141, data5: 1753, data6: 2017, data7: 2107, data8: 2303, data9: 2917, data10: 1435 },
        { sampleId: 'GNS011', year: 1880, data1: 1503, data2: 1713, data3: 2619, data4: 2855, data5: 2524, data6: 2825, data7: 2708, data8: 2254, data9: 2662, data10: 2787 },
        { sampleId: 'GNS011', year: 1870, data1: 2531, data2: 1590, data3: 2383, data4: 2141, data5: 1753, data6: 2017, data7: 2107, data8: 2303, data9: 2917, data10: 1435 },
        { sampleId: 'GNS011', year: 1880, data1: 1503, data2: 1713, data3: 2619, data4: 2855, data5: 2524, data6: 2825, data7: 2708, data8: 2254, data9: 2662, data10: 2787 },
        { sampleId: 'GNS011', year: 1870, data1: 2531, data2: 1590, data3: 2383, data4: 2141, data5: 1753, data6: 2017, data7: 2107, data8: 2303, data9: 2917, data10: 1435 },
        { sampleId: 'GNS011', year: 1880, data1: 1503, data2: 1713, data3: 2619, data4: 2855, data5: 2524, data6: 2825, data7: 2708, data8: 2254, data9: 2662, data10: 2787 },
        { sampleId: 'GNS011', year: 1870, data1: 2531, data2: 1590, data3: 2383, data4: 2141, data5: 1753, data6: 2017, data7: 2107, data8: 2303, data9: 2917, data10: 1435 },
        { sampleId: 'GNS011', year: 1880, data1: 1503, data2: 1713, data3: 2619, data4: 2855, data5: 2524, data6: 2825, data7: 2708, data8: 2254, data9: 2662, data10: 2787 },
        { sampleId: 'GNS011', year: 1870, data1: 2531, data2: 1590, data3: 2383, data4: 2141, data5: 1753, data6: 2017, data7: 2107, data8: 2303, data9: 2917, data10: 1435 },
        { sampleId: 'GNS011', year: 1880, data1: 1503, data2: 1713, data3: 2619, data4: 2855, data5: 2524, data6: 2825, data7: 2708, data8: 2254, data9: 2662, data10: 2787 },
      ],
      input: '',
    };
  },
  methods: {
    closeCard() {
      this.isCard = false; // 修正: 使用 this 访问 data 属性
    },
    showCard() {
      this.isCard = true; // 显示弹窗
    },
    showYearTable() {
      this.$emit('showYearTable');
    },
    showRawData() {
      this.$emit('showRawData');
    },
    showCrossData() {
      this.$emit('showCrossData');
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: auto;
}

.el-card /deep/ .el-card__header {
  padding: 0;
  height: 43px;
}

.btn {
  width: 10px;
  height: 10px;
  background-image: url("../../assets/images/header/u68.png");
}

/* .btn-1 {
    width: 10px;
    height: 10px;
    background-image: url("../../assets/images/header/u68.png");
  } */

.clearfix {
  width: 100%;
  /* 使 .clearfix 充满父容器的宽度 */
  height: 100%;
  /* 使 .clearfix 充满父容器的高度 */
  background-color: rgb(7, 46, 82);
  font-size: 24px;
  color: #ffffff;
  display: flex;
  /* 使用 flex 布局对齐内容 */
  justify-content: space-between;
  /* 水平对齐内容 */
  align-items: center;
  /* 垂直对齐内容 */
  padding: 0 10px;
  /* 可选：添加一些内边距 */
}

.box-card {
  width: 720px;
  height: 430px;
}

.card-footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.card-footer button {
  margin: 0 10px;
}

.text {
  font-size: 16px;
  display: flex;
  border: 1px solid #ddd;
  margin-top: 15px;
}

.text .left,
.text .right {
  width: 50%;
  padding: 10px;
}

.text .left .item {
  margin: 0;
}

.text .right img {
  width: 100%;
  height: auto;
}

.card-footer button {
  font-size: 16px;
  /* 调整按钮文字大小 */
  margin: 0 10px;
}

/deep/.el-dialog__header {
  height: 27px;
  background-color: rgb(7, 46, 82) !important;
}

/deep/.el-dialog__title {
  color: white !important;
  font-size: 24px;
}

/deep/.el-dialog__close {
  font-size: 24px !important;
  /* 增大关闭按钮字体大小 */
}
.left-table{
  border: #ddd 1px dashed;

}
</style>
